<template>
    <div id="User">
        <article id="personal">
            <h2>个人主页</h2>
            <div
                style="
                    display: flex;
                    margin: auto;
                    justify-content: space-between;
                    align-items: center;
                    position: relative;
                "
            >
                <img
                    :src="defaultImageOfUser"
                    width="70"
                    height="70"
                    style="border-radius: 50%; margin-top: 30px"
                />
                <span
                    style="
                        font-size: 20px;
                        position: absolute;
                        left: 100px;
                        color: white;
                        font-weight: 600;
                    "
                    >{{ Info.nickname }}</span
                >
                <span
                    style="
                        font-size: 15px;
                        position: absolute;
                        left: 105px;
                        top: 68px;
                        color: white;
                        font-weight: 600;
                        opacity: 0.7;
                    "
                    v-if="userInfo.isSeller === 1"
                    >商家</span
                >
                <el-button
                    style="position: absolute; right: 0px; top: 50px"
                    type="primary"
                    v-if="isFollowEd && isFollowEd === '0'"
                    @click="guanzhu"
                    >关注</el-button
                >
                <el-button
                    style="position: absolute; right: 0px; top: 50px"
                    type="info"
                    v-if="isFollowEd && isFollowEd !== '0'"
                    @click="qxguanzhu"
                    >已关注</el-button
                >
            </div>
        </article>
        <article>
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <h2 v-if="allArticle.length === 0">暂无数据</h2>
                <el-tab-pane label="文章" name="first">
                    <div id="Article">
                        <div
                            v-for="(item, index) in allArticle"
                            :key="index"
                            class="articleItem"
                        >
                            <h2>{{ item.title }}</h2>
                            <div class="time">
                                <p class="date">
                                    <span>
                                        {{
                                            new Date(
                                                item.publishTime
                                            ).getFullYear()
                                        }}
                                        /</span
                                    >
                                    <span>
                                        {{
                                            new Date(
                                                item.publishTime
                                            ).getMonth() + 1
                                        }}
                                        /</span
                                    >
                                    {{ new Date(item.publishTime).getDate() }}
                                </p>
                                <!-- <p class="m-y">
                
              </p> -->
                            </div>
                            <div class="show">
                                <div
                                    class="img"
                                    :style="{
                                        backgroundImage: `url(${
                                            item.cover
                                                ? item.cover
                                                : defaultCoverImage
                                        })`,
                                    }"
                                ></div>
                                <div class="des">
                                    {{ item.content }}
                                </div>
                            </div>
                            <div class="r-b">
                                <!-- <p>浏览量：{{ 111 }}</p> -->
                                <router-link :to="`/article/${item.serial}`"
                                    >阅读全文</router-link
                                >
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </article>
    </div>
</template>
  
  <script>
import { mapState, mapMutations } from "vuex";

export default {
    name: "User",
    data() {
        return {
            allArticle: [],
            Info: {},
            activeName: "first",
            isFollowEd: false,
            defaultImageOfUser: require("../assets/img/personal/ttxbb.jpg"),
            defaultCoverImage: require("../assets/img/article/3.jpg"),
        };
    },
    computed: {
        ...mapState(["userInfo"]),
    },
    methods: {
        guanzhu() {
            if (this.$store.state.userInfo.serial) {
                this.$axios({
                    method: "get",
                    headers: { token: localStorage.getItem("token") || "" },
                    url: `http://localhost:8081/ts/user/follow?userId=${this.$route.params.id}&followerId=${this.$store.state.userInfo.serial}`,
                }).then((res) => {
                    if (res.data.respCode === "200")
                        this.$message.success("关注成功");
                    this.$axios({
                        method: "get",
                        headers: { token: localStorage.getItem("token") || "" },
                        url: `http://localhost:8081/ts/user/personalHomePageRelated?userId=${this.$route.params.id}`,
                    }).then((res) => {
                        this.allArticle = JSON.parse(
                            res.data.respData.allarticle
                        );
                        this.Info = JSON.parse(res.data.respData.user);
                        if (res.data.respData.isFollowed)
                            this.isFollowEd = res.data.respData.isFollowed;
                    });
                });
            } else {
                this.$message.warning("暂未登录");
            }
        },
        qxguanzhu() {
            if (this.$store.state.userInfo.serial) {
                this.$axios({
                    method: "get",
                    headers: { token: localStorage.getItem("token") || "" },
                    url: `http://localhost:8081/ts/user/unfollow?userId=${this.$route.params.id}&followerId=${this.$store.state.userInfo.serial}`,
                }).then((res) => {
                    if (res.data.respCode === "200")
                        this.$message.success("取消关注成功");
                    this.$axios({
                        method: "get",
                        headers: { token: localStorage.getItem("token") || "" },
                        url: `http://localhost:8081/ts/user/personalHomePageRelated?userId=${this.$route.params.id}`,
                    }).then((res) => {
                        this.allArticle = JSON.parse(
                            res.data.respData.allarticle
                        );
                        this.Info = JSON.parse(res.data.respData.user);
                        if (res.data.respData.isFollowed)
                            this.isFollowEd = res.data.respData.isFollowed;
                    });
                });
            } else {
                this.$message.warning("暂未登录");
            }
        },
    },
    created() {
        this.$axios({
            method: "get",
            headers: { token: localStorage.getItem("token") || "" },
            url: `http://localhost:8081/ts/user/personalHomePageRelated?userId=${this.$route.params.id}`,
        }).then((res) => {
            this.allArticle = JSON.parse(res.data.respData.allarticle);

            this.Info = JSON.parse(res.data.respData.user);

            if (this.Info.headsculptureUrl) {
                this.defaultImageOfUser = this.Info.headsculptureUrl;
            }
            if (res.data.respData.isFollowed)
                this.isFollowEd = res.data.respData.isFollowed;
        });
    },
};
</script>
  
  <style lang="less" scoped>
#personal {
    background: url("../assets/img/bg/333.jpg") !important;
    background-position: center;
}
#Article {
    flex: 1;

    .articleItem {
        box-sizing: border-box;
        position: relative;
        width: 100%;
        margin-bottom: 15px;
        box-shadow: 0 0 4px #ddd;
        padding: 25px 20px;
        background-color: #fff;
        font-family: Quicksand;
        border-radius: 15px;

        h2 {
            margin-bottom: 15px;
            font-size: 20px;
            letter-spacing: 3px;
            line-height: 24px;
            border-left: 5px solid #73b899;
            text-indent: 10px;
        }
        .time {
            position: absolute;
            top: 0;
            right: 5px;
            width: 135px;
            .date {
                font-weight: bolder;
                font-size: 20px;
                text-align: center;
                color: #73b899;
                span {
                    font-size: 20px;
                }
            }
        }
        .show {
            display: flex;
            width: 100%;
            height: 200px;
            .img {
                box-sizing: border-box;
                width: 50%;
                padding-right: 1%;
                background-size: cover;
                background-position: center;
                border-radius: 15px;
                background-image: url(../assets/img/article/3.jpg);
            }
            .img2 {
                box-sizing: border-box;
                width: 50%;
                padding-right: 1%;
                background-size: cover;
                background-position: center;
                border-radius: 15px;
                background-image: url(../assets/img/article/2.jpg);
            }
            .des {
                box-sizing: border-box;
                width: 50%;
                padding-left: 5%;
                padding-top: 10px;
                font-size: 16px;
                overflow: hidden;
                height: 100px;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                padding-bottom: 20px;
                margin-bottom: 20px;
                text-indent: 2em;
                color: #444;
                font-size: 16px;
                letter-spacing: 4px;
                line-height: 30px;
                font-family: Quicksand, "Microsoft YaHei";
            }
        }
        .r-b {
            position: absolute;
            right: 20px;
            bottom: 20px;
            p {
                position: relative;
                left: 15px;
                top: -15px;
                color: #aaa;
                font-size: 12px;
            }
            a {
                padding: 10px 20px;
                background-color: #409eff;
                color: #fff;
                transition: opacity 0.3s;
                border-radius: 15px;
            }
        }
    }
}
#User {
    flex: 1;

    article {
        border-radius: 15px;
        box-sizing: border-box;
        width: 100%;
        margin-bottom: 15px;
        box-shadow: 0 0 4px #ddd;
        padding: 50px 20px 10px 20px;
        background-color: #fff;

        h2 {
            margin-bottom: 15px;
            font-size: 20px;
            letter-spacing: 3px;
            line-height: 24px;
            border-left: 5px solid #73b899;
            text-indent: 10px;
        }
    }

    /deep/ .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        margin-top: 10px;
    }
    /deep/ .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }
    /deep/ .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    /deep/ .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
}
</style>